<div class="dialog-frame" style="width: 800px;">
    <div class="dialog-header" bind="dialogHeader"></div>
    <div class="dialog-body" bind="dialogBody">
        <div id="sql-exporter-tabs" class="refine-tabs">
            <ul>
                <li><a href="#sql-exporter-tabs-content" bind="or_dialog_content"></a></li>
                <li><a href="#sql-exporter-tabs-download" bind="or_dialog_download"></a></li>
            </ul>

            <div id="sql-exporter-tabs-content" class="sql-exporter-tabs-content-main">
                <div class="grid-layout grid-layout-for-ui layout-normal layout-full"><table>
                    <!-- <tr>
                      <td bind="or_dialog_selAndOrd"></td>
                      <td><span bind="or_dialog_optFor"></span><span bind="columnNameSpan" class="sql-exporter-selected-column"></span></td>
                    </tr> -->
                    <tr>
                        <td width="100%">

                            <!-- <div bind="columnList" class="sql-exporter-columns"></div> -->
                            <div class="grid-layout layout-tighter layout-full">
                                <div class="sql-exporter-columns">
                                    <table bind = "columnListTable">
                                        <thead class="header">
                                        <tr>
                                            <th bind="fieldNameHeader"></th>
                                            <th bind="sqlTypeHeader"></th>
                                            <th bind="sizeHeader"></th>
                                            <th></th>
                                            <th bind="allowNullHeader">
                                                <label for="allowNullToggleCheckbox" bind="allowNullToggleCheckboxLabel"></label>
                                                <input type="checkbox" bind="allowNullToggleCheckbox" id="allowNullToggleCheckbox" checked />
                                            </th>
                                            <th bind="defaultHeader"></th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2">
                            <button class="button" bind="selectAllButton"></button>
                            <button class="button" bind="deselectAllButton"></button>
                        </td>
                    </tr>
                    <tr>
                        <td colspan="2"><div class="grid-layout layout-tighter layout-full"><table>
                            <tr>

                                <td width="1%"><input type="checkbox" bind="sqlExportOutputEmptyRowsCheckbox" id="sqlExportOutputEmptyRowsCheckboxId" /></td>
                                <td width="25%"><label for="sqlExportOutputEmptyRowsCheckboxId" bind="sqlExportOutputEmptyRowsLabel"></label></td>

                                <td width="1%"><input type="checkbox" bind="sqlExportAllRowsCheckbox" id="sqlExportAllRowsCheckboxId" /></td>
                                <td width="25%"><label for="sqlExportAllRowsCheckboxId" bind="sqlExportIgnoreFacetsLabel"></label></td>

                                <td width="1%"><input type="checkbox" bind="sqlExportTrimAllColumnsCheckbox" id="sqlExportTrimAllColumnsCheckboxId" /></td>
                                <td width="25%"><label for="sqlExportTrimAllColumnsCheckboxId" bind="sqlExportTrimAllColumnsLabel"></label></td>

                            </tr>
                        </table></div></td>
                    </tr>
                </table></div></div>


            <div id="sql-exporter-tabs-download" style="display: none;">

                <div>
                    <table>
                        <tr>
                            <td><label for="tableNameTextBoxId" bind="tableNameLabel"></label></td>
                            <td width="90%"><input spellcheck="false" type="text" bind="tableNameTextBox" id="tableNameTextBoxId" size="50%"/></td>

                        </tr>
                        <tr>
                        </tr>
                    </table>

                </div>

                <div class="grid-layout grid-layout-for-text layout-tightest">
                    <table width="100%">
                        <tr>
                            <td><span style="margin:2px; padding:2px;"></span></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" bind="includeStructureCheckbox" id="includeStructureCheckboxId"
                                       checked/>
                                <label for="includeStructureCheckboxId" bind="includeStructureLabel"></label></td>
                        </tr>
                        <tr>
                            <td>&nbsp&nbsp;<input type="checkbox" bind="includeDropStatementCheckbox"
                                                  id="includeDropStatementCheckboxId"/>
                                <label for="includeDropStatementCheckboxId" bind="includeDropStatementLabel"></label></td>
                        </tr>
                        <tr>
                            <td>&nbsp&nbsp;&nbsp&nbsp;<input type="checkbox" bind="includeIfExistDropStatementCheckbox"
                                                             id="includeIfExistDropStatementCheckboxId" disabled/>
                                <label for="includeIfExistDropStatementCheckboxId"
                                       bind="includeIfExistDropStatementLabel"></label></td>
                        </tr>
                        <tr>
                            <td><span style="margin:2px; padding:2px;"></span></td>
                        </tr>
                        <tr>
                            <td><input type="checkbox" bind="includeContentCheckbox" id="includeContentCheckboxId" checked/>
                                <label for="includeContentCheckboxId" bind="includeContentLabel"></label></td>
                        </tr>

                        <tr>
                            <td>&nbsp&nbsp;<input type="checkbox" bind="nullCellValueToEmptyStringCheckbox"
                                                  id="nullCellValueToEmptyStringCheckboxId" checked/>
                                <label for="nullCellValueToEmptyStringCheckboxId"
                                       bind="nullCellValueToEmptyStringLabel"></label></td>
                        </tr>
                        <tr>
                            <td>
                                <div style="display:flex; column-gap: 5px;justify-content: right;">
                                    <button class="button" bind="downloadPreviewButton"></button>
                                    <button class="button button-primary" bind="downloadButton"></button>
                                </div>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>

            <div id="sql-exporter-tabs-code" style="display: none;">
                <textarea class="sql-exporter-code" bind="optionCodeInput"></textarea>
            </div>

        </div>
    </div>
    <div class="dialog-footer" bind="dialogFooter">
        <button class="button" bind="cancelButton"></button>
    </div>
</div>
